<template>
	<view>
		<u-navbar title="Yes or No" title-color="#FFF" :background="navBackground" :is-fixed="true" :border-bottom="false" :is-back="true" back-icon-color="#FFF"></u-navbar>
		<view>
			<view class="img-box d-flex-center w-100">
				<image :src="`/static/img/img/illustration/${!showStopBtn && text ? (text == 'YES' ? 'yes' : 'no') : 'think'}.png`" mode="widthFix" class="img"></image>
			</view>
			<view class="d-flex-center w-100 cont-txt">
				<text>{{ text || '点击开始选择' }}</text>
			</view>
			<view class="d-flex-center btns w-100">
				<text @click="stop" class="btn d-flex-center" v-if="showStopBtn">停止选择</text>
				<text @click="start" class="btn d-flex-center" v-else>{{ text ? '重新选择' : '开始选择' }}</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			navBackground: this.$navBackground,
			array: ['YES', 'NO'],
			text: '',
			interval: '',
			showStopBtn: false
		};
	},
	methods: {
		start() {
			clearInterval(this.interval);
			let i = 0;
			this.showStopBtn = true;
			this.interval = setInterval(() => {
				this.text = this.array[i];
				i = i == 0 ? 1 : 0;
			}, 50);
		},
		stop() {
			clearInterval(this.interval);
			this.showStopBtn = false;
		}
	},
	onUnload() {
		clearInterval(this.interval);
	}
};
</script>

<style lang="scss">
.img-box {
	height: 700rpx;
	.img {
		width: 306rpx;
	}
}
.cont-txt {
	font-size: 30rpx;
	color: $tian-main-color;
	font-weight: bold;
}
.btns {
	margin-top: 30rpx;
	.btn {
		background: $tian-main-color;
		color: #ffffff;
		margin-top: 30rpx;
		width: 200rpx;
		height: 70rpx;
		border-radius: 35rpx;
	}
}
</style>
